<?php $this->headStyle()->captureStart() ?>
table table {border: 1px solid #999}
td {vertical-align: top}
td td {border-bottom: 1px solid #ccc}
th, td {padding: 2px 5px}
th {background: #ccc; text-align: left}
<?php $this->headStyle()->captureEnd() ?>
<h2>ACL Tester</h2>
<p><?php echo $this->info ?></p>
<hr />
<p>Select user: <?php echo $this->users ?><span id="userRoles"></span></p>
<p>Resource (module/controller): <?php echo $this->resIds ?><span id="privs"></span></p>
<p><button id="query">Is this user allowed?</button> <strong id="isAllowed"></strong></p>
<table>
    <tr>
        <td>
<table>
    <tr>
        <th>Role</th>
        <th>Parent role(s)</th>
    </tr>
<?php foreach ($this->roles as $role) : ?>
    <tr>
        <td><?php echo $role[0] ?></td>
        <td><?php echo $role[1] ?></td>
    </tr>
<?php endforeach ?>
</table>
        </td>
        <td>
<table id="rules">
    <tr>
        <th>Resource Id</th>
        <th>Privilege</th>
        <th>Role</th>
        <th>Allowed?</th>
    </tr>
</table>
        </td>
    </tr>
</table>

<a href="<?php echo $this->url(array('action' => 'login', 'controller' => 'user', 'module' => 'admin')) ?>">Go to login page.</a>

<?php $this->headScript()->captureStart() ?>
$(function () {
    var userRoles = <?php echo $this->userRoles ?>;
    var rulesHeader = $('#rules').html();
    $('#userSelect').change(function () {
        $('#userRoles').html('<strong> User roles:</strong> ' + userRoles[$(this).val()]);
    }).change();

    var privs = <?php echo $this->privs ?>;
    $('#resId').change(function () {
        var options = privs[$(this).val()];
        var html = ' Privilege (action): <select id="priv">\n';
        for (var i = 0, len = options.length; i < len; i++) {
            html += '<option value="'+ options[i] +'">' + options[i] + '</option>\n';
        }
        html += '</select>\n';
        $('#privs').html(html);
    }).change();

    $('#query').click(function () {
        var user = $('#userSelect').val();
        var resId = $('#resId').val();
        var priv = $('#priv').val();
        $.getJSON(
            '<?php echo $this->url(array('action' => 'query', 'format' => 'json')) ?>',
            {"user": user, "resId": resId, "priv": priv},
            function (data) {
                $('#isAllowed').html(data.allowed ? ' YES ' : ' NO ');
                var rules = rulesHeader;
                for (var i in data.rules) {
                    rule = data.rules[i];
                    rules += '<tr><td>' + rule.resource_id + '</td><td>' + rule.privilege + '</td><td>'
                          +  rule.role_id + '</td><td>' + rule.allowed + '</td></tr>';
                }
                $('#rules').html(rules);
            }
        );
    });
});
<?php $this->headScript()->captureEnd() ?>
<?php $this->headScript()->prependFile($this->asset('js/jquery-1.3.2.min.js')); ?>
